<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root1">
      <!-- 
        <student></student>
        Unknown custom element: <student> - did you register the component correctly?
        因为student是school的子组件，没有在vm里注册
        在谁那里注册的，就在谁那里用
      -->
      <!-- <student></student> -->
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      // 定义学生组件
      const student = Vue.extend({
        name: "student",
        template: `
           <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
           </div>
           `,
        data() {
          return {
            name: "张三",
            age: 19,
          };
        },
      });
      // 定义学校组件 注册student子组件
      const school = Vue.extend({
        name: "school",
        template: `
           <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
           </div>
           `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
        components: {
          student: student,
        },
      });

      // 定义hello组件
      const hello = Vue.extend({
        name: "hello",
        template: `
           <div>
                <h1>{{msg}}</h1>
           </div>
           `,
        data() {
          return {
            msg: "hello",
          };
        },
      });

      const app = Vue.extend({
        template: `
        <div>
          <school></school>
          <hello></hello>
        </div>
        `,
        components:{
          school:school,
          hello:hello,
        },
      });

      const vm1 = new Vue({
        el: "#root1",
        template:`<app></app>`, // 注册后也可以这样使用，就不用在html里使用显式地使用标签了
        components: {
          // 这里只用注册app即可，记住要在html里使用<app></app>。当然，可以
          app: app,
        },
      });
    </script>
  </body>
</html>
